<script setup>
import info from '@/assets/data/recruit'
import '@/assets/icons/iconfont.css'

// 是否显示微信二维码
const isShow = ref(false)
// 是否显示电话号码
const isShow2 = ref(false)
</script>

<template>
  <div class="root">
    <h1>招聘信息</h1>
    <div class="wrapper">
      <Zcard v-for="item in info" :key="item.id">
        <div class="info">
          <div class="recruit">
            <div class="header">
              <b>{{ item.post }} </b>
              <span>{{ item.salary }}</span>
            </div>
            <div class="tags">
              <el-tag
                v-for="tag in item.tags"
                :key="tag"
                type="info"
                effect="light"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div class="footer">
              <span>
                <Icon name="ep:location-filled" />
                成都 温江
              </span>
              <span>{{ item.experience }}</span>
              <span>{{ item.education }}</span>
            </div>
          </div>
          <div class="company">
            <div class="left">
              <header>
                <img src="/智信logo.png" alt="" />
                成都智信耐材科技有限公司
              </header>
              <main>
                <el-tag type="info" effect="light"> 民营 </el-tag>
                <el-tag type="info" effect="light"> 20-99人 </el-tag>
                <el-tag type="info" effect="light"> 金属制品业 </el-tag>
              </main>
              <footer>
                <i class="iconfont icon-a-nvshi1"></i>
                <span>马女士（人事专员）</span>
                <div
                  class="wechat"
                  @mouseenter="isShow = true"
                  @mouseleave="isShow = false"
                >
                  <Icon name="ri:wechat-fill"></Icon>
                  <transition name="fade">
                    <div class="pic" v-show="isShow">
                      <img src="/recruit/人事微信.png" alt="" />
                    </div>
                  </transition>
                </div>
                <div
                  class="phone"
                  @mouseenter="isShow2 = true"
                  @mouseleave="isShow2 = false"
                >
                  <Icon name="ri:phone-fill"></Icon>
                  <transition name="fade">
                    <div class="contact" v-show="isShow2">
                      电话：028-6193 4900
                      <br />
                      手机：138 8080 8080
                      <br />
                      邮箱：cdzxnckj@163.com
                    </div>
                  </transition>
                </div>
              </footer>
            </div>
            <el-button
              type="primary"
              @click="$router.push(`/recruit/detail/${item.id}`)"
              >查看详情 >></el-button
            >
          </div>
        </div>
      </Zcard>
    </div>
  </div>
</template>

<style scoped lang="less">
.root {
  h1 {
    padding-top: 40px;
    text-align: center;
  }
  background-color: #f4f6f9;
  :deep(.zcard) {
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    .info {
      display: flex;
      justify-content: space-between;
      .recruit {
        display: flex;
        flex-direction: column;
        .header {
          text-align: left;
          font-size: 18px;
          span {
            padding: 0 10px;
            color: #426eff;
            font-weight: 700;
          }
        }
        .tags {
          margin: 15px 0;
          .el-tag {
            margin-right: 10px;
          }
        }
        .footer {
          color: #555c70;
          span {
            padding-right: 10px;
          }
          svg {
            vertical-align: middle;
          }
        }
      }
      .company {
        display: flex;
        align-items: center;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-right: 200px;
          header {
            height: auto;
            text-align: left;
            img {
              width: 18px;
              margin-right: 5px;
              margin-top: -4px;
              vertical-align: middle;
            }
          }
          main {
            margin: 15px 0;
            .el-tag {
              margin-right: 10px;
            }
          }
          footer {
            height: auto;
            margin: 0;
            color: #555c70;
            & > div {
              display: inline;
              &:hover {
                cursor: pointer;
              }
            }
            .wechat {
              position: relative;
              margin: 0 10px;
              &:hover {
                color: green;
              }
              .pic {
                position: absolute;
                left: -60px;
                top: -80px;
                width: 80px;
                height: 80px;
                background-color: #ccc;
                overflow: hidden;
                z-index: 100;
                border-radius: 5px;
                &:hover {
                  transform: scale(1.2);
                }
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .phone {
              position: relative;
              &:hover {
                color: blue;
              }
              .contact {
                color: #fff;
                position: absolute;
                left: 0;
                top: -80px;
                padding: 10px;
                width: 250px;
                background-color: #2c2c2c;
                border-radius: 5px;
              }
            }
          }
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
